import React,{useEffect,useRef,useState} from 'react'
import './workdata.css'
import * as echarts from 'echarts';


const workdata: React.FC = () => {
 
const data = ['H5', '海报', '表单', '长页', '视频', '互动'];
const value = [335, 310, 234, 135, 154, 85];





const option = {
    title: {
    text: '制作数量',
    // 设置文本样式
    textStyle: {
      color: 'black',
      fontSize: 14,
     
    },
    // 设置标题的位置为居中对齐，垂直方向上放置在底部
    left: 'center',
    top: 'bottom',
    // 可选：添加额外的偏移量以精确控制位置
    // offsetCenter: [0, '10px']
  },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },

    series: [
      {
        type: 'pie',
        radius: '60%',
        center: ['50%', '40%'],
         labelLine: {
      length: 5,  // 修改此值以调整分支线长度
      length2: 0  // 如果有第二段分支线，可以设置此值
    },
        data: data.map((_, i) => ({
          value: value[i],
          name: _,
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };


  const option1={
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      legend: {
        data: ["新增总表单(份)", "新增被浏览(次)"],
        icon:'circle'
      },
    
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["09-16", "09-17", "09-18", "09-19", "09-20", "09-21", "09-22"],
        },
      ],
      yAxis: [
        {
          type: "value",
          scale: true,
          name: "数量",
          min: 0,
          max: 2.2,
          interval: 0.2,
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          type: "value",
          scale: true,
          name: "次数",
          min: 0,
          max: 0.8,
          interval: 0.2,
          axisLabel: {
            formatter: "{value}",
          },
        },
      ],
      series: [
        {
          name: "新增总表单(份)",
          type: "line",
          data: [0, 0, 0, 0, 0, 0, 0],
          smooth: true,
          areaStyle: {
            opacity: 0.8,
          },
          lineStyle: {
            width: 2,
          },
        },
        {
          name: "新增被浏览(次)",
          type: "line",
          data: [0, 0, 0, 0, 0, 0, 0],
          smooth: true,
          areaStyle: {
            opacity: 0.8,
          },
          lineStyle: {
            width: 2,
          },
        },
      ],
    };


useEffect(()=>{
var chartDom = document.getElementById('bbc');
var myChart = echarts.init(chartDom);
myChart.setOption(option)

var chartDoms = document.getElementById('acc');
var myCharts = echarts.init(chartDoms);
myCharts.setOption(option1)

},[])



  return (
    <div className='workbox'>
      {/* 左边内容 */}
        <div className='workbox_lt'>
           {/* 左边内容上部 */}
          <div className='workboxlt_hed'>
            <p className='hedpone'>
              <span>活跃周报</span>
              <span>9.16-9.22</span>
            </p>
            <p className='hedptwo'><button>去制作</button></p>
          </div>
             {/* 左边内容下部 */}
          <div className='workboxlt_bom'>
            {/* 下部左 */}
            <div className='happyone'>

              <div className='allrounds'>
                <div className='rounds'>0</div>
                <p>下载作品</p>
                 <p style={{color:'#ccc'}}>周对比0</p>
              </div>

                <div className='allrounds'>
                <div className='rounds'>5</div>
                <p>创建作品</p>
                 <p style={{color:'#ccc'}}>周对比<span style={{color:'blue'}}>+5</span></p>
              </div>

                <div className='allrounds'>
                <div className='rounds'>5</div>
                <p>积分获取</p>
                 <p style={{color:'#ccc'}}>周对比<span style={{color:'blue'}}>+5</span></p>
              </div>

            </div>

              {/* 下部右 */}
            <div className='happytwo' id='bbc'></div>
          </div>
        </div>

        {/* 右边内容 */}
        <div className='workbox_rt'>
          <div className='analysis'><span>数据分析</span></div>
          <div className='analysisecharts' id='acc'></div>
        </div>
    </div>
  )
}

export default workdata
